<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <!--MyHeader-->
    <div th:include="common::MyHeader"></div>
    <!-- End of MyHeader -->

</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Sidebar -->
    <ul th:replace="common::Sidebar(${session.user.loginName},${session.role.roleName})"></ul>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <div th:include="common::Topbar(${session.user.userName})"></div>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid pre-scrollable">

                <!-- Page Heading -->
                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <h1 class="h3 mb-0 text-gray-800">选报记录</h1>
                </div>
                <!-- Content Row -->
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col">课程</th>
                        <th scope="col">创建人</th>
                        <th scope="col">人数</th>
                        <th scope="col">上课时间</th>
                        <th scope="col">教室</th>
                        <th scope="col">学分</th>
                        <th scope="col">备注</th>
                        <th scope="col">操作</th>
                    </tr>
                    </thead>
                    <tbody id="dataTable">
                    </tbody>
                </table>

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        <div th:include="common::Footer"></div>
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div th:include="common::LogoutModal"></div>


</body>

</html>
<script>
    $(function () {
        $.get("/course/myLogCourseData",
            function (response) {
                if (response.code == 0) {
                    var courses = response.data;
                    var str = ""
                    for (let i = 0; i < courses.length; i++) {
                        str = str + '<tr id="' + courses[i].courseId + '">\n' +
                            '                        <th> ' + courses[i].courseName + '</th>\n' +
                            '                        <th> ' + courses[i].createByName + '</th>\n' +
                            '                        <th> ' + courses[i].count + '</th>\n' +
                            '                        <th> ' + courses[i].timetable + '</th>\n' +
                            '                        <th> ' + courses[i].classroom + '</th>\n' +
                            '                        <th> ' + courses[i].credit + '</th>\n' +
                            '                        <th>\n' +
                            '                            <button type="button" class="btn btn-sm btn-link" title="课程详情:"\n' +
                            '                                    onclick="show(\'' + courses[i].remarks + '\')" >\n' +
                            '                                详情\n' +
                            '                            </button>\n' +
                            '                        </th>\n' +
                            '                        <th>\n'
                        if (courses[i].status != 2) {
                            str = str + '                            <button id="chooseBtn' + courses[i].courseId + '" class="btn btn-dark" disabled="disabled">退选\n' +
                                '                            </button>\n' +
                                '                        </th>\n' +
                                '                    </tr>'
                        } else {
                            str = str + '                            <button id="chooseBtn' + courses[i].courseId + '" class="btn btn-info" onclick="unchooseCourse(\'' + courses[i].courseId + '\')">退选\n' +
                                '                            </button>\n' +
                                '                        </th>\n' +
                                '                    </tr>'
                        }
                    }
                    $("#dataTable").html(str)

                } else {
                    alert(response.msg)
                }
            }
        )

    })

    function unchooseCourse(value) {
        $.post(
            "/course/unChoose",
            {courseId: value},
            function (response) {
                if (response.code == 0) {
                    alert(response.msg);
                    window.location.href = "/course/myLog"
                } else {
                    alert(response.msg)
                }
            }
        )
    }

    function show(value) {
        alert(value)
    }
</script>
